<template>
    <div>
        <ToolBar>
            <div>
                <el-input placeholder="请输入订单编号" size="small" style="width: 140px" v-model="searchParams.orderId"
                    clearable></el-input>
                <el-select v-model="searchParams.state" clearable style="width: 140px" placeholder="请选择订单状态" size="small">
                    <el-option label="已支付" value="2"></el-option>
                    <el-option label="未支付" value="1"></el-option>
                    <el-option label="配送中" value="3"></el-option>
                    <el-option label="已送达" value="4"></el-option>
                    <el-option label="已收货" value="5"></el-option>
                    <el-option label="已取消" value="6"></el-option>
                </el-select>
                <el-button type="success" size="small" @click="refresh()">查询</el-button>
                <el-button type="warning" size="small" @click="clearSearchParams()">重置</el-button>
            </div>
        </ToolBar>
        <!-- 订单列表 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="orderid" label="订单编号">
                <template slot-scope="s">
                    {{ s.row.orderid }}
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
            <template slot-scope="s">
                <template v-if="s.row.state == 1">未支付</template>
                <template v-else-if="s.row.state == 2">已支付</template>
                <template v-else-if="s.row.state == 3">配送中</template>
                <template v-else-if="s.row.state == 4">已送达</template>
                <template v-else-if="s.row.state == 5">已收货</template>
                <template v-else="">已取消</template>
            </template>
    
            </el-table-column>
            <el-table-column prop="created" label="创建日期">
                <template slot-scope="s">
                    {{ s.row.created }}
                </template>
            </el-table-column>
            <el-table-column prop="freight" label="运费">
                <template slot-scope="s">
                    {{ s.row.freight }}
                </template>
            </el-table-column>
            <el-table-column prop="paystyle" label="支付方式">
                <template slot-scope="s" v-if="s.row.paystyle == 0">
                    支付宝
                </template>
            </el-table-column>
            
            <el-table-column prop="total" label="总金额">
                <template slot-scope="s">
                    {{ s.row.total }}
                </template>
            </el-table-column>
            <el-table-column prop="distid" label="用户姓名">
                <template slot-scope="s">
                    {{ s.row.userreceiveinfo.name }}
                </template>
            </el-table-column>
            <el-table-column prop="distid" label="用户住址">
                <template slot-scope="s">
                    {{ s.row.userreceiveinfo.address }}
                </template>
            </el-table-column>
            <el-table-column prop="distid" label="用户电话">
                <template slot-scope="s">
                    {{ s.row.userreceiveinfo.phone }}
                </template>
            </el-table-column>
  <el-table-column fixed="right" label="操作" width="240">
    <div slot-scope="s">
        <el-button type="primary" size="small" @click="openDetailDialog(s.row.orderid)">查看详情</el-button>
    </div>
  </el-table-column>

        </el-table>
        <el-pagination background :page-size="pageSize" layout="prev, pager, next" :total="total"
            @current-change="changePage"></el-pagination>
        <Edit :showEditDialog="showEditDialog" @close="showEditDialog = false" @success="refresh()" />
          <Detail :showDetail="showDetailDialog" @close="closeDetailDialog" :orderId="selectedOrderId" />

    </div>
</template>
  
<script>
import { exportCvsTable } from "@/utils/cvs";
import { resetObject } from "@/utils/common";
import { getOrder } from "@/api/orderManage/getOrderList";
import Edit from "./Edit.vue";
import Detail from "./Detail.vue";

export default {
    data() {
        return {
            pageSize: 10, //每页显示条
            total: 0, //总条数
            pageNo: 1, //默认当前页码第1页
            searchParams: {
                orderId: "", // 搜索框
                state: ""
            },
            showEditDialog: false,
            showDetailDialog: false, // 控制订单详情弹窗显示/隐藏   
            selectedOrderId: "", // 选择的订单ID
            tableData: ["1"]
        };
    },
    created() {
        this.getTableData();
        getOrder().then(resp => {
            this.tableData = resp;
        })
    },
    methods: {

        openDetailDialog(id) {
           
            this.selectedOrderId = id; // 获取选择的订单ID
            this.showDetailDialog = true; // 打开订单详情弹窗
            },
            closeDetailDialog() {
            this.selectedOrderId = ""; // 重置选择的订单ID
            this.showDetailDialog = false; // 关闭订单详情弹窗
        },
        changePage(val) {
            //val:改变页码当前的页码
            this.pageNo = val;
            this.getTableData(); //根据新的页码选取分页数据
        },
        getTableData() {
           getOrder({
               pageNo: this.pageNo,
               pageSize: this.pageSize,
               orderId: this.searchParams.orderId,
               state: this.searchParams.state,
               
           }).then(resp=>{
               this.tableData = resp.records,
               this.total = resp.total
           })
        },
        routeDemo() {
            this.$message.info("待添加");
        },
        refresh() {
            this.getTableData();
        },
        returnData(pageList) {
            this.tableData = pageList.list;
        },
        clearSearchParams() {
            resetObject(this.searchParams);
            this.refresh();
        },
        removeItem(row) {
            this.$confirm("确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    row.d = 0;
                })
                .catch(() => { });
        }
    },
    components: { Edit , Detail }
};
</script>